import { Canvas, useSVG } from '@shopify/react-native-skia';
import React from 'react';
import { useWindowDimensions } from 'react-native';
import EnergyNode from './EnergyNode';
import {
  DIAGRAM_HEIGHT_FOR_ONE_NODE,
  HALF_NODE_BACKGROUND_SIZE,
} from './Constants';
import { StationEnergyDiagramModel } from '@/services/api/stationApi';
import useNamedThemeSkiaSvg from '@/hooks/useNamedThemeSkiaSvg';

type SingleNodeDiagramProps = {
  diagramData: StationEnergyDiagramModel;
};

const SingleNodeDiagram: React.FC<SingleNodeDiagramProps> = (props) => {
  const windowDimension = useWindowDimensions();
  const svg = useNamedThemeSkiaSvg('pv');
  return (
    <>
      <Canvas
        style={{
          width: windowDimension.width,
          height: DIAGRAM_HEIGHT_FOR_ONE_NODE,
        }}
      >
        <EnergyNode
          circleCenter={{
            x: windowDimension.width * 0.5,
            y: HALF_NODE_BACKGROUND_SIZE,
          }}
          textPlacement="bottom"
          visible
          iconSource={svg}
          nodeTitle="测试PV"
          nodeValue="100.3 kWh"
        />
      </Canvas>
    </>
  );
};

export default React.memo(SingleNodeDiagram);
